@import url(./variables.less);
@import url(./mixins.less);

.home {
	// 商品下列时，不让tabbar遮盖商品信息
	padding-bottom: 60px;

	.download {
		position: sticky;
		top: 0;
		display: flex;
		height: 16vw;
		border-bottom: 1px solid #e3e3e3;
		box-sizing: border-box;
		background-color: #fff;
		.left {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 3.2vw;

			overflow: hidden;
			.logo {
				width: 11.7333vw;
				height: 11.7333vw;
				border-radius: 2.13333vw;
				// x偏移 y偏移 blur 扩散
				// （rgb(0 0 0 / 15%) === rgba(0,0,0,.15)）
				// 使用box-shadow 模拟 边框
				box-shadow: 0 0 0.93333vw 0 rgb(0 0 0 / 15%);
			}

			.info {
				margin-left: 2.1333vw;
				font-size: @normalFontSize;
				flex: 1;
				overflow: hidden;

				.title {
					color: #333;
					font-size: @normalFontSize;
					.nowrap();
				}

				.desc {
					margin-top: 0.5333vw;
					color: #999;
					font-size: @smallFontSize;
					.nowrap();
				}
			}
		}

		.right {
			width: 25.2vw;
			height: 16vw;
			text-align: center;
			line-height: 16vw;
			font-size: @bigFontSize;
			color: #fff;
			background: linear-gradient(to right, #ff0409, #ff3162);
		}
	}

	.subsidy {
		width: 93.6vw;
		height: 44vw;
		margin: 3.2vw auto;
		border-radius: 3.2vw;
		background-color: #fff;
		padding: 0 2.6667vw;
		box-sizing: border-box;
		.header {
			height: 10.6667vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				display: flex;
				align-items: flex-end;

				img {
					width: 16.8vw;
				}

				.time {
					font-size: @smallFontSize;
					display: flex;
					align-items: center;
					margin-left: 1.3333vw;

					.item {
						width: 5.3333vw;
						height: 4.2667vw;
						text-align: center;
						line-height: 4.2667vw;
						background-color: @mainColor;
						color: #fff;
						border-radius: 0.8vw;
					}

					.split {
						color: @mainColor;
						margin: 0 0.8vw;
					}
				}
			}

			.right {
				font-size: @smallFontSize;
				color: @mainColor;
				padding-right: 2.1333vw;
				position: relative;
				&::after {
					content: '';
					position: absolute;
					width: 1.2vw;
					height: 1.2vw;
					border: 0.2667vw solid @mainColor;
					border-top-color: transparent;
					border-left-color: transparent;
					transform: rotate(-45deg);
					top: 0;
					bottom: 0;
					margin: auto 0;
				}
			}
		}

		.list {
			display: flex;
			.item {
				flex: 1;
				text-align: center;
				img {
					width: 20.9333vw;
				}

				.info {
					.new {
						font-size: @normalFontSize;
						color: @mainColor;
					}

					.old {
						font-size: @smallFontSize;
						text-decoration: line-through;
						color: #777;
					}
				}
			}
		}
	}

	.category {
		margin: 5.3333vw 0 2.6667vw;
		display: flex;
		padding: 0 3.2vw;
		.item {
			flex: 1;
			text-align: center;

			.title {
				font-size: @bigFontSize;
				color: #666;
			}

			.subtitle {
				height: 4.2667vw;
				font-size: @smallFontSize;
				color: #999;
				padding: 0 1.6vw;
				border-radius: 2.4vw;
			}

			&.active {
				.title {
					color: @mainColor;
				}
				.subtitle {
					background-color: @mainColor;
					color: #fff;
				}
			}
		}
	}

	.product {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.item {
			width: 46.6667vw;
			margin-top: 1.6vw;
			border-radius: 1.3333vw;
			overflow: hidden;
			background-color: #fff;
			&:nth-child(2n) {
				margin-left: 1.6vw;
			}

			.album {
				img {
					width: 100%;
				}
			}

			.info {
				padding: 2.6667vw;
				box-sizing: border-box;
				.company {
					// 移动于右侧文字
					text-indent: 4.8vw;
					background: url(../img/company_01.png) no-repeat left center /
						4vw 4vw;
				}
			}
		}
	}
}
